<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/home'}">用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search">
      <el-input placeholder="请输入内容" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-button type="success" plain>成功按钮</el-button>
    </div>
    <template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="username" label="姓名" width="180"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="tableData.role_name" label="用户状态">
            <!-- 自定义列模板，可以结合其他组件使用 -->
            <!-- template的slot-scope 字段名  字段名.row 能获取到当前这一行的数据 相当于item -->
            <template slot-scope="item">
                <el-switch v-model="item.row.mg_state" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
          <el-button type="success" icon="el-icon-check" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-table-column>
      </el-table>
    </template>
  </div> 
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    };
  },

  methods: {
      getUsers(){
          // axios get传参 ，第二个参数为一个对象，键为params，值为一个对象，里面放着参数 
          this.axios.get('users',{
              params:{query:'', pagenum:1, pagesize:3}
              }).then(res=>{
                console.log(res)
                this.tableData = res.data.data.users
          })
      }
  },

  created() {
      this.getUsers();
  }
};
</script>

<style lang='less' scoped>
.search {
  margin: 10px 0;
  .el-input-group {
    width: 47%;
    margin-right: 5px;
  }
}
</style>
